<template>
    <div ref="myChart01"></div>
</template>

<script lang="ts" setup>
    // 引入echarts
    import * as echarts from 'echarts'
    import {ref, onMounted,defineProps} from "vue";
    const props  = defineProps(["value"])
    const myChart01: any = ref(null);
    onMounted(() => { // 需要获取到element,所以是onMounted的Hook
        let myChart = echarts.init(myChart01.value);
        const hours = new Date().getHours();
        const www = 20;
        const categoryCalue = [];
        const seriesCalue = [];
        for(let i = 0;i<=24;i++){
            categoryCalue.push(i);
            if(i < hours){
                if(i < 7 || i > 22){
                    seriesCalue.push((Math.random() * 0.4 + 0.3).toFixed(2))
                }else if(i > 18){
                    seriesCalue.push((Math.random() * 0.5+ 0.3).toFixed(2))
                }else{
                    seriesCalue.push((Math.random() * 0.5 + 0.5).toFixed(2))
                }
            }
        }
        seriesCalue.push(props.value);
        // 绘制图表
        myChart.setOption({
            xAxis: {
                type: 'category',
                data: categoryCalue
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: seriesCalue,
                type: 'line',
                smooth: true
            }]
        });
        window.onresize = function () { // 自适应大小
            myChart.resize();
        };
    });
</script>
